<template>
  <HeaderNav />
  <article>
    <!-- 轮播图 -->
    <Swiper :data="swipers" />
    <!-- 网站主体 -->
    <div id="main" class="clearfix">
      <!-- 定义右侧窗口信息 -->
      <section class="aside">
        <!-- 面板 -->
        <UserAside />
        <!--  广告位    -->
        <Advice :data="advert"/>
        <!--  显示推荐的12个作者 -->
        <AuthorTop12 v-model="attentions" />
      </section>

      <section style="height: 1122px">
        <div class="title first">
          <a>热门资源</a>
          <a class="more-m" href="/catalog">更多</a>
        </div>

        <NoContent :show="hotResources.length == 0" />

        <ResourceItem v-for="(res, index) in hotResources" :key="index"
                      :ext="res.value.ext" :visit-num="res.score"
                      :score="res.value.score" :title="res.value.resourceName"
                      :size="res.value.size" :id="res.value.id"
                      @click="$router.push({name: 'resource-detail', params: {id: $event}})"/>

        <div class="title">
          <a>精选资源</a>
          <a class="more-m" href="/catalog">更多</a>
        </div>
        <NoContent :show="coreResources.length == 0" />

        <ResourceItem v-for="(res, index) in coreResources" :key="index"
                      :ext="res.value.ext" :visit-num="res.score"
                      :score="res.value.score" :title="res.value.resourceName"
                      :size="res.value.size" :id="res.value.id"
                      @click="$router.push({name: 'resource-detail', params: {id: $event}})"/>
      </section>
    </div>
  </article>
  <Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import ResourceItem from "../components/ResourceItem.vue";
import Swiper from "../components/Swiper.vue";
import AuthorTop12 from "../components/AuthorTop12.vue";
import Advice from "../components/Advice.vue";
import NoContent from "../components/NoContent.vue";
import UserAside from "../components/UserAside.vue";
export default {
  components: {
    UserAside,
    NoContent,
    Advice,
    AuthorTop12,
    Swiper,
    HeaderNav,
    Footer,
    ResourceItem,
  },
  data(){
    return {
      swipers: [],
      advert: {} ,
      hotResources:[],
      coreResources: [],
      attentions: [],
    }
  },
  created() {
    return this.$api.querySysIndex().then(ret=> {
       if (ret.status) {
          this.swipers = ret.data.swipers;
          this.advert = ret.data.advert ;
          this.hotResources = ret.data.hotResources ;
          this.coreResources = ret.data.coreResources ;
          this.attentions = ret.data.attentions ;
       }
    })
  }
}
</script>

<style scoped>
#main > section div.title {
  clear:both;
  width: 100%;
  height: 40px;
  background: linear-gradient(45deg, rgba(0,0,0, .1) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.1) 100%);
  line-height: 40px;
  margin-left: -80px;
  padding: 0 80px;
  font-weight: 800;
}

#main > section div.title.first {
  margin-top: -20px;
}

#main > section div.title  .more-m  {
  font-weight: 400;
  float: right;
  margin-right: 30px;
}
</style>